<template>
  <div class="dashboard-editor-container">
    <h1 style="line-height: 50px; text-align: center">每日数据详情汇总</h1>
    <el-form :inline="true"
             style="margin-top: 30px"
             label-width="120px">
      <el-form-item label="日期">
        <el-date-picker v-model="date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyyMMdd"></el-date-picker>
      </el-form-item>
      <el-button type="primary"
                 icon="el-icon-search"
                 size="mini"
                 @click="getSupplierDayDataPageList">搜索</el-button>
    </el-form>
    <el-table style="width: 85%; margin: 0 auto"
              v-loading="loading"
              :data="tableData"
              :row-class-name="tableRowClassName">
      <el-table-column prop="dayShowStr"
                       label="数据上传日期"
                       align="center"></el-table-column>
      <el-table-column prop="totalNum"
                       label="上传数据"
                       align="center"
                       :formatter="formatterTable"></el-table-column>
      <el-table-column prop="usedNum"
                       label="使用条数"
                       align="center"
                       :formatter="formatterTable"></el-table-column>
      <!-- <el-table-column prop="successNum" label="上传成功数据" align="center">
      </el-table-column>-->
      <!-- <el-table-column
        prop="samplingTotalNum"
        label="抽样数据量"
        align="center"
      >
      </el-table-column>-->
      <el-table-column prop="intentionRateStr"
                       label="意向率"
                       align="center"
                       :formatter="formatterTable"></el-table-column>
      <!-- <el-table-column prop="failNum"
                       label="失败数"
                       align="center"
                       :formatter="formatterTable"></el-table-column> -->
      <!-- 重复量 =》 失败数=》 -->
      <el-table-column prop="repeatedNum"
                       label="失败数"
                       align="center"
                       :formatter="formatterTable"></el-table-column>
      <el-table-column fixed="right"
                       label="总失败数"
                       width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.dayShowStr=='总计'">{{scope.row.addTotal}}</div>
          <div v-else-if="scope.row.addTotal"
               style="color:#1890ff;cursor:pointer;"
               @click="lookErrNum(scope.row,true)">{{scope.row.addTotal}}</div>
          <div v-else
               @click="lookErrNum(scope.row,false)">--</div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="失败文件下载" align="center">
        <template slot-scope="scope">
          <el-button size="small">下载</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination v-show="total > 0"
                :total="total"
                :page.sync="pageNum"
                :limit.sync="pageSize"
                @pagination="getSupplierDayDataPageList" />
  </div>
</template>
<style>
.el-table .warning-row {
  background: oldlace;
  color: #f78989;
}
</style>
<script>
import { querySupplierDayDataPageList } from "@/api/supplier/supplier.js";
export default {
  data () {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      date: [],
    };
  },
  created () {
    this.getSupplierDayDataPageList();
  },
  methods: {
    lookErrNum (row, type) {
      console.log('查看失败总数', row);
      if (!type) { return this.$message({ showClose: true, message: '当日无失败数', type: "success" }); }
      this.$router.push({ path: '/dataManage/dayErrDataDetails', query: row })
    },
    formatterTable (row, column, cellValue, index) {
      if (!cellValue && column) {
        if (cellValue == "0") {
          cellValue = "0";
        } else {
          cellValue = "--";
        }
      }
      return cellValue;
    },
    tableRowClassName ({ row, rowIndex }) {
      if (row.dayShow == 0) {
        return "warning-row";
      }
      return "";
    },
    getSupplierDayDataPageList () {
      this.loading = true;
      querySupplierDayDataPageList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        beginDay: this.date ? this.date[0] : "",
        endDay: this.date ? this.date[1] : "",
      })
        .then((res) => {
          this.loading = false;
          /**addTotal=>总失败数 */
          let responseData = JSON.parse(JSON.stringify(res.data.list))
          responseData.map(item => item.addTotal = item.repeatedNum)

          // responseData.map(item => item.addTotal = item.failNum + item.repeatedNum)
          this.tableData = responseData
          console.log('tableData', this.tableData);
          console.log('responseData', responseData);
          this.total = res.data.total;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  // padding: 32px;
  // width: 90%;
  // margin: 0 auto;
  padding-top: 30px;
  position: relative;
  overflow: hidden;
}
</style>